Hi.
Chart3D seems to be perfect to visualize a chart on one of my apps.
However I would need a way to read the point of a SurfacePlot of a Chart3D that was touched by the user?
Something like a Chart .chartOverlay that has a ChartProxy that can convert screen coordinates of the chart in values, but in 3D (maybe using hit testing ).
Thanks and best regards.
João Colaço
Swift Charts
RSS for tagVisualize data with highly customizable charts across all Apple platforms using the compositional syntax of SwifUI.
Posts under Swift Charts tag
45 Posts
Sort by:
Post
Replies
Boosts
Views
Activity
Adding .chartScrollableAxes(.horizontal) to a chart prevents chartYAxisLabel from being positioned top right, over Y axis.
We want the label at top right, over the Y-axis, but with chartScrollableAxes it is always top right relative to the initial chartXVisibleDomain, which puts it in the middle of the chart if chartXVisibleDomain < full x domain.
import SwiftUI
import Charts
struct ContentView: View {
@State private var numbers = (0..<100)
.map { _ in Double.random(in: 0...100) }
@State var visibleDomain : Int = 50
var body: some View {
Chart(Array(zip(numbers.indices, numbers)), id: \.1) { index, number in
LineMark(
x: .value("Index", index),
y: .value("Number", number)
)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: visibleDomain)
.chartScrollPosition(initialX: 70)
.chartYAxisLabel(position: .topTrailing, alignment: .center) {
/*
We want the label at top right, over the Y-axis, but with
chartScrollableAxes it is always top right relative to the initial
chartXVisibleDomain, which puts it in the middle of the chart if
chartXVisibleDomain < full x domain
*/
Text("units")
.foregroundStyle(.red)
.fontWeight(.bold)
}
.padding()
}
}
#Preview {
ContentView()
}
Hi,
I was wondering if it's possible (and advisable) to use the new glass effects available in iOS 26 in Swift Charts?
For example, in a chart like the one in the image I've attached to this post, I was looking to try adding a .glassEffect modifier to the BarMarks to see how that would look and feel.
However, it seems it's not available directly on the BarMark (ChartContent) type, and I'm having trouble adding it in other ways too, such as using in on the types I supply to modifiers like foregroundStyle or clipShape.
Am I missing anything? Maybe it's just not advisable or necessary to use glass effects within Charts?
I would like to have different fill colors in my chart. What I want to achieve is that if the values drop below 0 the fill color should be red. If they are above the fill color should be red. My code looks as follows:
import SwiftUI
import Charts
struct DataPoint: Identifiable {
let id: UUID = UUID()
let x: Int
let y: Int
}
struct AlternatingChartView: View {
enum Gradients {
static let greenGradient = LinearGradient(gradient: Gradient(colors: [.green, .white]), startPoint: .top, endPoint: .bottom)
static let blueGradient = LinearGradient(gradient: Gradient(colors: [.white, .blue]), startPoint: .top, endPoint: .bottom)
}
let data: [DataPoint] = [
DataPoint(x: 1, y: 10),
DataPoint(x: 2, y: -5),
DataPoint(x: 3, y: 20),
DataPoint(x: 4, y: -8),
DataPoint(x: 5, y: 15),
]
var body: some View {
Chart {
ForEach(data) { data in
AreaMark(
x: .value("Data Point", data.x),
y: .value("amount", data.y))
.interpolationMethod(.catmullRom)
.foregroundStyle(data.y < 0 ? Color.red : Color.green)
LineMark(
x: .value("Data Point", data.x),
y: .value("amount", data.y))
.interpolationMethod(.catmullRom)
.foregroundStyle(Color.black)
.lineStyle(StrokeStyle.init(lineWidth: 4))
}
}
.frame(height: 200)
}
}
#Preview {
AlternatingChartView()
}
The result looks like this:
I also tried using
foregroundStyle(by:)
and
chartForegroundStyleScale(_:)
but the result was, that two separate areas had been drawn. One for the below and one for the above zero datapoints.
So, what would be the right approach to have two different fill colors?
I have a Chart displaying Counts per Date over 2-3 years. I'd like to have the XAxis mark consist of MM-yy or even MM/nyy. Is this possible?
OK, just saw
AxisValueLabel(format: .dateTime.month().year())
which gives e.g. Mar 2024. This is good.
Better might be Mar 24 (maybe a Y3K problem ;-) or even better
Mar. OR Mar
24. 2024
Or best increment the year when it changes.
Are any of these alternate formats possible?
Thanks, David
PS, my current .chartXAxis code
.chartXAxis {
AxisMarks(values: .stride(by: .month, count: 3)) { value in
if value.as(Date.self) != nil {
AxisValueLabel(format: .dateTime.month().year())
AxisGridLine()
AxisTick()
}
}
}
I have a Swiftui app, and I'm using the Apple Chart framework to chart user transactions over time. I'd like to be able to show an annotation at the top of the chart that shows the date range of the records currently visible on the chart. Much like Apple does in their Heath App charts.
But I just can't seem to find a method to read the current date range displayed on the chart once the user has scrolled though the chart.
Has anyone done anything similar, or maybe seen some sample code? So far I'm striking out on this...
Thanks in advance
If you try to add a graph for a function in Apple Notes you can see that numbers marking coordinates are positioned along the axes (see screenshot 1).
But when I am making my own plot view with Swift Charts I don't see that option. Marks for X axis are positioned at the bottom, and marks for Y axis are positioned to the right. I don't see an API that can configure them to be shown along the axes.
Is there something that I am missing? Or is Apple just using some private API for that?
I could make a custom overlay to display these marks, but then I will have to adjust them while zooming myself, which can be problematic.
Hello, I am wondering if it is possible to have a Line Mark with different line styles. I am trying to create a Line Mark where part of the line is solid and another part of the line is dashed. Even with a conditional it only displays one or the other. Is it currently possible in SwiftCharts to do something like the attached image? Thank you.
I'm currently building an app in SwiftUI that needs to show some charts. Swift Charts has been quite helpful but I can't seem to set the domain of the chart just how I want it. The following chart display events that happend in a week and I want to display every hour even if nothing happened there, and I want the hours to go up, instead of the default where the new day start at the top of the chart.
struct ChartView: View {
let dataSets: [someData]
// simplified date init
let datemin = date(year:2025, month: 2, day: 24)
let datemax = date(year:2025, month: 2, day: 25)
var body: some View {
Chart(dataset) { data in
PointMark(x: .value("Day", data.day, unit: .weekday),
y: .value("Time", data.time, unit: .minute))
}
}
// The focus is on this line
.chartYScale(domain: .automatic(reversed: true))
}
}
The .chartYScale(domain:) modifier allows me to set the start of the day at the bottom, but still ignores some hours.
If I instead use this
Chart(...) { ... }
.chartYScale(domain: datemin...datemax)
The chart display every hour of the day, but now the start of the day is at the bottom. I can't seem to find a way to get both things at the same time. if I add both modifiers only the first one get applied while the other ignored.
Any solutions or workarounds?
I'm implementing infinite scrolling with Swift Charts where additional historical data loads when scrolling near the beginning of the dataset. However, when new data is loaded, the chart's scroll position jumps unexpectedly.
Current behavior:
Initially loads 10 data points, displaying the latest 5
When scrolling backwards with only 3 points remaining off-screen, triggers loading of 10 more historical points
After loading, the scroll position jumps to the 3rd position of the new dataset instead of maintaining the current view
Expected behavior:
Scroll position should remain stable when new data is loaded
User's current view should not change during data loading
Here's my implementation logic using some mock data:
import SwiftUI
import Charts
struct DataPoint: Identifiable {
let id = UUID()
let date: Date
let value: Double
}
class ChartViewModel: ObservableObject {
@Published var dataPoints: [DataPoint] = []
private var isLoading = false
init() {
loadMoreData()
}
func loadMoreData() {
guard !isLoading else { return }
isLoading = true
let newData = self.generateDataPoints(
endDate: self.dataPoints.first?.date ?? Date(),
count: 10
)
self.dataPoints.insert(contentsOf: newData, at: 0)
self.isLoading = false
print("\(dataPoints.count) data points.")
}
private func generateDataPoints(endDate: Date, count: Int) -> [DataPoint] {
var points: [DataPoint] = []
let calendar = Calendar.current
for i in 0..<count {
let date = calendar.date(
byAdding: .day,
value: -i,
to: endDate
) ?? endDate
let value = Double.random(in: 0...100)
points.append(DataPoint(date: date, value: value))
}
return points.sorted { $0.date < $1.date }
}
}
struct ScrollableChart: View {
@StateObject private var viewModel = ChartViewModel()
@State private var scrollPosition: Date
@State private var scrollDebounceTask: Task<Void, Never>?
init() {
self.scrollPosition = .now.addingTimeInterval(-4*24*3600)
}
var body: some View {
Chart(viewModel.dataPoints) { point in
BarMark(
x: .value("Time", point.date, unit: .day),
y: .value("Value", point.value)
)
}
.chartScrollableAxes(.horizontal)
.chartXVisibleDomain(length: 5 * 24 * 3600)
.chartScrollPosition(x: $scrollPosition)
.chartXScale(domain: .automatic(includesZero: false))
.frame(height: 300)
.onChange(of: scrollPosition) { oldPosition, newPosition in
scrollDebounceTask?.cancel()
scrollDebounceTask = Task {
try? await Task.sleep(for: .milliseconds(300))
if !Task.isCancelled {
checkAndLoadMoreData(currentPosition: newPosition)
}
}
}
}
private func checkAndLoadMoreData(currentPosition: Date?) {
guard let currentPosition,
let earliestDataPoint = viewModel.dataPoints.first?.date else {
return
}
let timeInterval = currentPosition.timeIntervalSince(earliestDataPoint)
if timeInterval <= 3 * 24 * 3600 {
viewModel.loadMoreData()
}
}
}
I attempted to compensate for this jump by adding:
scrollPosition = scrollPosition.addingTimeInterval(10 * 24 * 3600)
after viewModel.loadMoreData(). However, this caused the chart to jump in the opposite direction by 10 days, rather than maintaining the current position.
What's the problem with my code and how to fix it?
Hi,
I have created a line graph using LineMark in Charts, which by default includes grid lines and axes lines. My requirement is to remove the grid lines but retain the axes lines and the values.
I have tried the following code:
.chartXAxis {
AxisMarks(preset: .extended, values: .stride(by: 2), stroke: StrokeStyle(lineWidth: 0))
}
This is removing grid lines as well as axes lines.
How to retain axes lines while removing grid lines ?
I have a SwiftUI LineMark chart that inverts the y axis when the data the chart is plotting is all zeros. I'm expecting the y axis 0 to be at the bottom but when the data is all zeros it's at the top. Below is an example demonstrating the problem:
import SwiftUI
import Charts
struct ChartView: View {
let data: [Double] = [0,0,0,0,0]
var body: some View {
Chart {
ForEach(data.indices, id: \.self) { index in
LineMark(
x: .value("Index", index),
y: .value("Value", data[index])
)
}
}
.chartYAxis {
AxisMarks(values: [0, 10, 20, 30, 40, 50]) { value in
AxisValueLabel()
AxisTick()
AxisGridLine()
}
}
.padding()
}
}
I can't use .chartYScale(domain: ) because it overrides the chartYAxis where the real code creates custom a leading and trailing y axis.
Does anyone have any suggestions how I may fix this?
Summary
I have a SwiftUI Chart that worked correctly in iOS 17, allowing both horizontal scrolling and tap gesture selection. However, in iOS 18, the same exact chart will not allow for both tap gestures and scrolling to work -- it's either we allow scrolling or we allow tap gestures but not both. We have tried everything to try to circumvent this issue but have had to resort to old methods of creating the chart. This is an issue that has negatively impacted our customers as well.
Again, the charts were working fine on iOS 17, but on iOS 18 the chart scroll + tap gesture capability is not working.
Expected Behavior (iOS 17)
Users can scroll horizontally through the chart.
Users can tap on data points to highlight them.
The selected data point updates when tapped.
Observed Behavior (iOS 18)
The chart no longer scrolls when chartOverlay with the Tap Gesture is applied.
Tap selection still works as expected.
Code Snippet
Below is the working implementation from iOS 17:
private var iOS17ChartView: some View {
Chart {
RectangleMark(
yStart: .value(String(firstLevelAlertBand), firstLevelAlertBand),
yEnd: .value("100", 100)
)
.foregroundStyle(Theme.Colors.green.opacity(0.15))
RectangleMark(
yStart: .value(String(secondLevelAlertBand), secondLevelAlertBand),
yEnd: .value(String(firstLevelAlertBand), firstLevelAlertBand)
)
.foregroundStyle(Theme.Colors.orange.opacity(0.15))
RectangleMark(
yStart: .value("0", 0),
yEnd: .value(String(secondLevelAlertBand), secondLevelAlertBand)
)
.foregroundStyle(Theme.Colors.red.opacity(0.15))
ForEach(telemetryData, id: \.timestamp) { entry in
if let utcDate = dateFormatter.date(from: entry.timestamp) {
let localDate = convertToUserTimeZone(date: utcDate)
let tankLevel = entry.tankLevel ?? 0
LineMark(
x: .value("Date", localDate),
y: .value("Tank Level", tankLevel)
)
.foregroundStyle(statusColor)
AreaMark(
x: .value("Date", localDate),
y: .value("Tank Level", tankLevel)
)
.foregroundStyle(statusColor.opacity(0.50))
PointMark(
x: .value("Date", localDate),
y: .value("Tank Level", tankLevel)
)
.foregroundStyle(selectedDataPoint?.date == localDate ? Theme.Colors.primaryColor : statusColor)
.symbolSize(selectedDataPoint?.date == localDate ? 120 : 80)
PointMark(
x: .value("Date", localDate),
y: .value("Tank Level", tankLevel)
)
//.foregroundStyle(.white).symbolSize(10)
.foregroundStyle(Theme.Colors.white(colorScheme: colorScheme))
.symbolSize(12)
}
}
}
.chartXScale(domain: (firstTimestamp ?? Date())...(latestTimestamp ?? Date()))
.chartXVisibleDomain(length: visibleDomainSize)
.chartScrollableAxes(.horizontal)
.chartScrollPosition(x: $chartScrollPositionX)
.chartXAxis {
AxisMarks(values: .stride(by: xAxisStrideUnit, count: xAxisCount())) { value in
if let utcDate = value.as(Date.self) {
let localDate = convertToUserTimeZone(date: utcDate)
let formatStyle = self.getFormatStyle(for: interval)
AxisValueLabel {
Text(localDate, format: formatStyle)
.font(Theme.Fonts.poppinsRegularExtraSmall)
.foregroundStyle(Theme.Colors.black(colorScheme: colorScheme))
}
AxisTick()
.foregroundStyle(Theme.Colors.black(colorScheme: colorScheme).opacity(1))
}
}
}
.chartOverlay { proxy in
GeometryReader { geometry in
Rectangle().fill(Color.clear).contentShape(Rectangle())
.onTapGesture { location in
let xPosition = location.x - geometry[proxy.plotAreaFrame].origin.x
// Use proxy to get the x-axis value at the tapped position
if let selectedDate: Date = proxy.value(atX: xPosition) {
if let closestEntry = telemetryData.min(by: { abs(dateFormatter.date(from: $0.timestamp)!.timeIntervalSince1970 - selectedDate.timeIntervalSince1970) < abs(dateFormatter.date(from: $1.timestamp)!.timeIntervalSince1970 - selectedDate.timeIntervalSince1970) }) {
selectedDataPoint = (convertToUserTimeZone(date: dateFormatter.date(from: closestEntry.timestamp)!), closestEntry.tankLevel ?? 0)
if let dateXPos = proxy.position(forX: convertToUserTimeZone(date: dateFormatter.date(from: closestEntry.timestamp)!)),
let tankLevelYPos = proxy.position(forY: closestEntry.tankLevel ?? 0) {
// Offset the x-position based on the scroll position
let adjustedXPos = dateXPos - proxy.position(forX: chartScrollPositionX)!
withAnimation(.spring()) {
selectedPointLocation = CGPoint(x: adjustedXPos, y: tankLevelYPos - 60) // Offset popup above the point
showPopup = true
}
}
}
}
}
}
.onChange(of: chartScrollPositionX) { newValue in
// Dynamically update the popup position when scroll changes
if let selectedDataPoint = selectedDataPoint {
if let dateXPos = proxy.position(forX: selectedDataPoint.date) {
let adjustedXPos = dateXPos - proxy.position(forX: chartScrollPositionX)!
selectedPointLocation.x = adjustedXPos
}
}
}
}
}
Please help!
Nick
The problem is:
As per screenshot below, one can only see the lineChart. I have another struct AffiliateView coded under this Chart:
import SnapKit
import Charts
import DGCharts
class AffiliateViewController: UIViewController {
private lazy var chartView: LineChartView = {
let chart = LineChartView()
chart.noDataText = "No data available."
chart.chartDescription.enabled = false
chart.xAxis.labelPosition = .bottom
chart.rightAxis.enabled = false
chart.legend.enabled = true
chart.backgroundColor = .lightGray // For debugging visibility
return chart
}()
private lazy var containerView: UIView = {
let view = UIView()
view.backgroundColor = .white
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
// Add container view and chart view to the main view
view.addSubview(containerView)
view.addSubview(chartView)
// Add SwiftUI View inside the container view
let affiliateView = AffiliateView()
let hostingController = UIHostingController(rootView: affiliateView)
addChild(hostingController)
containerView.addSubview(hostingController.view)
hostingController.view.frame = containerView.bounds
hostingController.didMove(toParent: self)
layout()
setupChartData()
}
private func layout() {
// Layout the container view (SwiftUI content)
containerView.snp.makeConstraints { make in
make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
make.left.right.equalToSuperview()
make.height.equalTo(350) // Increase the height for the SwiftUI content
}
// Layout the chart view below the container view
chartView.snp.makeConstraints { make in
make.top.equalTo(containerView.snp.bottom).offset(20) // Space between chart and the affiliate content
make.left.equalToSuperview().offset(20)
make.right.equalToSuperview().offset(-20)
make.height.equalTo(200) // Set a fixed height for the chart
}
}
private func setupChartData() {
let dataEntries = [
ChartDataEntry(x: 1, y: 10),
ChartDataEntry(x: 2, y: 20),
ChartDataEntry(x: 3, y: 15),
ChartDataEntry(x: 4, y: 30),
ChartDataEntry(x: 5, y: 25)
]
let dataSet = LineChartDataSet(entries: dataEntries, label: "Clicks per Day")
dataSet.colors = [.blue]
dataSet.valueColors = [.black]
dataSet.circleColors = [.red]
dataSet.circleRadius = 4.0
let data = LineChartData(dataSet: dataSet)
chartView.data = data
chartView.notifyDataSetChanged()
}
}
// SwiftUI View remains in the same file
struct AffiliateView: View {
@State private var customMessage: String = ""
@State private var uniqueLink: String = "Your unique link will appear here."
@State private var clickData: [Double] = [10, 20, 15, 30, 25] // Example data
var body: some View {
NavigationView {
VStack(spacing: 20) {
// TextField for custom message input
TextField("Enter your custom message...", text: $customMessage)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding(.horizontal)
// Generate Link Button
Button(action: generateLink) {
Text("Generate Sign-Up Link")
.font(.headline)
.foregroundColor(.white)
.frame(maxWidth: .infinity, maxHeight: 50)
.background(Color.red)
.cornerRadius(10)
}
.padding(.horizontal)
// Generated Link Label
Text(uniqueLink)
.font(.body)
.multilineTextAlignment(.center)
.padding(.horizontal)
// You can add a chart here if you want to show it in SwiftUI too
/* LineChartView(data: clickData, title: "Clicks per Day", legend: "Daily Clicks") */
}
.navigationTitle("Affiliate Marketing")
.navigationBarTitleDisplayMode(.inline)
}
}
private func generateLink() {
let encodedMessage = customMessage.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? ""
uniqueLink = "https://affiliate.example.com/referral?message=\(encodedMessage)"
addClickData()
}
private func addClickData() {
clickData.append(Double.random(in: 0...100))
}
}
As you see, the AffiliateView has been declared outside of Controller View class. The View content was visible before the lineChart was added into this code. Now the View content is not visible anymore. I have tried to increment/decrement values at make.height.equalTo() but to no avail.
Could anyone kindly point me in the right direction?
I want to visualize the data stored in a DataFrame using various charts (barmark, sectormark, linemark, etc.).
My questions are as follows:
Can a DataFrame be used directly within a chart? If so, could you provide a simple example?
If it cannot be used directly, what is the correct way to use it? Could you provide an example?
Thank you for your help.
Best regards.
I am trying to discover how to display my application’s calculated Solar Information values in a chart.
My application identifies a selected location in MapKit.
The application identifies the location’s longitude, latitude, and current time of day.
The application calculates the selected location’s NOAA [SOLAR ELEVATION], and the [SOLAR AZIMUTH] for the time of day.
The application calculates the data, then stores the calculated values as a [Plist] file within my application’s Document Directory.
For the moment, complete with repeated scouring of the Internet, I am not sure how to properly convert, transfer, or create a Structure, required by the chart to display the calculated values. I would like to create the chart once the calculations are complete, but I introduced a Plist to store the calculations for future use, too.
The calculated values coincide with the NOAA Solar Calculations, complete to the displayed [h : m : s], whereas I also designed the application to create the [Array of Dictionary Objects] to store the calculated values for each subsequent six minute interval, until the end of the selected location’s day. The calculated values are properly appended to the [Array of Dictionary Objects] after each completed calculation, with data transfer constants. There are 240 calculations per day from [00:06:00 to 23:54:00], presented as a [STRING], complete with the [Elevation] presented as a [DOUBLE].
For example :: The application generates the following [Calculated Array of Dictionary Objects], then recreates, and appends a new Plist in the Document Directory.
mySolarElevationDataArrayOfDictionaries :: [(theRequiredTimeOfDay: "00:06:00", theCalculatedElevation: -62.60301082991259), (theRequiredTimeOfDay: "00:12:00", theCalculatedElevation: -62.94818095051292), (theRequiredTimeOfDay: "00:18:00", theCalculatedElevation: -63.245198186807215), (theRequiredTimeOfDay: "00:24:00", theCalculatedElevation: -63.49236786176319), (theRequiredTimeOfDay: "00:30:00", theCalculatedElevation: -63.688223890934175), (theRequiredTimeOfDay: "00:36:00", theCalculatedElevation: -63.831564163806945), (theRequiredTimeOfDay: "00:42:00", theCalculatedElevation: -63.921486675739004), (theRequiredTimeOfDay: "00:48:00", theCalculatedElevation: -63.95741610687708), to the end of the data :: ===> (theRequiredTimeOfDay: "23:54:00", theCalculatedElevation: -60.69355458181633)]
The application presents the initial data as follows ::
Then presents a compass view to illustrate the results ::
I modified the Chart’s [MOCK DATA] from the calculated values to test the Chart’s display in a [SwiftUI Hosting Controller].
For example :: The following Chart Mock Data in a [HourlySunElevation_MockChartData.swift] file is called by the application’s [Content View].
import Foundation
struct Value {
let theRequiredTimeOfDay: String
let theCalculatedElevation: Double
static func theSunElevationMockData() -> [Value] {
return [Value(theRequiredTimeOfDay: "00:06:00", theCalculatedElevation: -62.60301082991259), Value(theRequiredTimeOfDay: "00:12:00", theCalculatedElevation: -62.94818095051292), Value(theRequiredTimeOfDay: "00:18:00", theCalculatedElevation: -63.245198186807215), Value(theRequiredTimeOfDay: "00:24:00", theCalculatedElevation: -63.49236786176319), Value(theRequiredTimeOfDay: "00:30:00", theCalculatedElevation: -63.688223890934175), Value(theRequiredTimeOfDay: "00:36:00", theCalculatedElevation: -63.831564163806945), Value(theRequiredTimeOfDay: "00:42:00", theCalculatedElevation: -63.921486675739004), Value(theRequiredTimeOfDay: "00:48:00", theCalculatedElevation: -63.95741610687708), to the end of the data :: ===> Value(theRequiredTimeOfDay: "23:54:00", theCalculatedElevation: -60.69355458181633)]
The Chart illustrates the Mock Data as follows ::
I also created a Struct within the [MySunElevationChart_ViewController] to try to append the calculated data, using the same logic with the Plist data transfer constants, as employed by the [Array of Dictionary Objects] ::
struct ChartSolarElevationValues {
var theRequiredTimeOfDay: String
var theCalculatedElevation: Double
// Structs have an implicit [init]. This is here for reference.
init(theRequiredTimeOfDay: String, theCalculatedElevation: Double) {
self.theRequiredTimeOfDay = theRequiredTimeOfDay
self.theCalculatedElevation = theCalculatedElevation
//mySolarElevationChartData.append(self)
} // End of [init(theRequiredTimeOfDay: String, theCalculatedElevation: Double)]
} // End of [struct ChartSolarElevationValues]
Unfortunately, the result did not append each subsequent calculation, but continued to create the same calculation as a new distinct object ::
NOTE :: I only called three calculations with the Struct test.
// NOTE :: To prevent an [ERROR] at [var mySolarElevationChartData = [ChartSolarElevationValues]] since it has an init.
// Therefore you must add () at the end of [var mySolarElevationChartData = [ChartSolarElevationValues]]
let theData = [ChartSolarElevationValues]()
//print("theData :: \(theData)\n")
let someData = ChartSolarElevationValues(theRequiredTimeOfDay: TheTimeForDaySunElevation.theTheTimeForDaySunElevation, theCalculatedElevation:VerifyCityLocationSearchRequestCorrectedSolarElevation.theVerifyCityLocationSearchRequestCorrectedSolarElevation)
var theData_New = theData
theData_New.append(someData)
print("theData_New :: \(theData_New)\n")
// Prints :: theData_New :: [My_Map.ChartSolarElevationValues(theRequiredTimeOfDay: "00:06:00", theCalculatedElevation: -61.11000735370401)]]
// Prints :: [theData_New :: [My_Map.ChartSolarElevationValues(theRequiredTimeOfDay: "00:12:00", theCalculatedElevation: -61.315092082911875)]]
// Prints :: [theData_New :: [My_Map.ChartSolarElevationValues(theRequiredTimeOfDay: "00:18:00", theCalculatedElevation: -61.47403413313205)]]
So, I am misintepreting the required coding structure to properly append the Elevation Chart, and the Azimuth Chart with the calculated data.
I know something is amiss, but for the moment, I do not know how to address this issue.
Your suggestions would be welcome ... :]
jim_k
Does SwiftUI now support the ability for a chart to have two different Y Axes? ChaptGPT seems to think it does, but I keep getting compiler errors in XCode.
Hi there, so I have this chart that's taking in a Date for it's x values and a time interval for their y values. For some reason, the labels aren't centering on each bar, the only fix I see is to add an offset to each label but that seems hacky.
My code:
Chart {
ForEach(weekBreakdownArr, id: \.startDate) { bd in
BarMark(
x: .value("Date", bd.startDate),
y: .value("Duration", bd.durationWorkDone),
width: .fixed(15)
)
.foregroundStyle(Color.redYarn)
.cornerRadius(2)
}
//...
}
// shownXValues are just the start dates in an array
.chartXAxis {
AxisMarks(position: .automatic, values: shownXValues) { val in
AxisValueLabel {
Text("Th")
.useAppFont(size: 12, relativeTo: .body, weight: .regular)
}
}
}
I'm building an app that lets users create charts with custom values and while testing, I came up with this bug that happens when the view width forces the legend to have more than 1 line. Due to Swift trying to align the different labels vertically, it's forcing the first line to overflow.
Here's the code to generate this:
import SwiftUI
import Charts
struct DonutView: View {
var countries:[(country:String, count:Int)] = [
(country: "Africa", count: 54),
(country: "Asia", count: 48),
(country: "Europe", count: 44),
(country: "North America", count: 23),
(country: "Oceania", count: 14),
(country: "South America", count: 12),
]
var body: some View {
Chart {
ForEach(0..<countries.count, id:\.self) { idx in
SectorMark(
angle: .value(countries[idx].country, countries[idx].count),
innerRadius: .ratio(0.5)
)
.foregroundStyle(by: .value("label", countries[idx].country))
}
}
.frame(width: 310, height: 270)
.border(.blue, width: 1)
}
}
Has anyone seen this? Is there a solution?
I know about building custom legends, but SwiftUI has no wrapping HStack nor VStack, and the app allows users to change the legend position from the bottom to the top or sides. If I were to go this way, I'd have to write a very large chunk of code to bypass what seems to be a bug.
Hi Team,
We are integrating SwiftUI's Charts BarMark, UI looks good but when we try setting up custom ADA it doesn't reflect/override the accessibility label/value we set manually.
Is it iOS defect or is there any workaround?
Thanks in advance.
Sample:
Chart(data) {
BarMark(
x: .value("Category", $0.department),
y: .value("Profit", $0.profit)
)
.foregroundStyle(by: .value("Product Category", $0.productCategory))
.accessibilityIdentifier("BarMark")
.accessibilityLabel("Dep: \($0.department)")
.accessibilityValue("Profile: \($0.profit) Category: \($0.productCategory)")
}